@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #f8f8f8;
  }

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #b8b8b8;
    border-radius: 20px;
  }
}

@mixin primaryBGRGBA($opc) {
  background: rgba(18, 110, 227, $opc) !important;
}

@mixin primaryColorRGBA($opc) {
  color: rgba(18, 110, 227, $opc) !important;
}

@mixin ellipsisBasic($clamp: 1) {
  @if $clamp == 1 {
    word-break: break-all;
    overflow: hidden; // 超出的文本隐藏
    text-overflow: ellipsis; // 溢出用省略号显示
    white-space: nowrap; // 溢出不换行
  } @else {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    white-space: normal;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $clamp;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin pct($pct) {
  width: #{$pct};
  position: relative;
  margin: 0 auto;
}

@mixin triangle($width, $height, $color, $direction) {
  $width: $width*0.5;
  $color-border-style: $height solid $color;
  $transparent-border-style: $width solid transparent;
  height: 0;
  width: 0;

  @if $direction==up {
    border-bottom: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  } @else if $direction==right {
    border-left: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  } @else if $direction==down {
    border-top: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  } @else if $direction==left {
    border-right: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }
}

@mixin blueVertical() {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: $primary;
}

/* @mixin sidebarSixPx(){
  content: "";
  position: absolute;
  top: 0;
  right: 0px;
  width: 6px;
  height: 100%;
  background-color: #f4f4f1;
} */
